<template>
    <view>
        <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
                       :up="upOption">
            <view class="index-kecheng">
                <view class="index-content-qy" v-if="list.length">
                    <block class="video-jieshao" v-for="(item,index) in list" :key="index">
                        <view class="video-content">
                            <image class="video-content-img" :src="item.cover" @tap="gotoCourse(item)"></image>
                            <view class="video-content-flex">
                                <view>
                                    <view class="video-content-h1" @tap="gotoCourse(item)">{{item.title}}</view>
                                </view>
                                <view class="video-content-learn">
                                    <view class="video-content-detail" @tap="gotoCourse(item)">
                                        <view class="video-content-detail-price video-content-detail-free" v-if="item.price==0.00">免费</view>
                                        <view class="video-content-detail-price" v-else>￥{{item.price}}</view>
                                        <view class="video-content-detail-r" v-if="item.price!=0.00">
                                            <view v-if="item.vip_price==0.00" style="color: #ff4a4a">免费</view>
                                            <view v-else>￥{{item.vip_price}}</view>
                                            <image class="video-content-detail-img" :src="static_media.img01"></image>
                                        </view>
                                    </view>
                                    <view class="video-content-learn-button" @tap="collect_opt(item)">取消收藏</view>
                                </view>
                            </view>
                        </view>
                    </block>
                </view>
            </view>
        </mescroll-body>
        <right-menu></right-menu>
    </view>
</template>
<script>
    import {mapState} from 'vuex';
    import rightMenu from '@/components/right-menu';
    import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'

    export default {
        mixins: [MescrollMixin], // 使用mixin
        data() {
            return {
                mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
                // 下拉刷新的配置(可选, 绝大部分情况无需配置)
                downOption: {
                    use: false, // 是否启用下拉刷新; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
                    native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
                },
                // 上拉加载的配置(可选, 绝大部分情况无需配置)
                upOption: {
                    page: {
                        num: 0,
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                },
                // 列表数据
                list: [],
                shoucang:''//收藏
            };
        },
        onShow() {

        },
        onLoad(){
        },
        computed: {
            ...mapState(['userInfo','appId']),
            static_media () {
                return {
                    img01: this.$lib.$config.localMedia + '/static/img/vip-price.png',
                }
            },
        },
        components: {
          rightMenu
        },
        methods: {
            // 收藏
            async collect_opt(item) {
                let res = await this.$lib.$http.post({
                    url: this.$lib.$urlMap.fav,
                    data: {
                        id: item.id
                    },
                    needLogin: true
                });
                if (res.code == 1) {
                    this.course_fav = res.data
                    this.shoucang = this.course_fav.is_fav
                    this.mescroll.resetUpScroll()
                }
            },
            /*上拉加载的回调*/
            async upCallback(page,item) {
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条

                let res = await this.$lib.$http.post({
                    url:this.$lib.$urlMap.favList,
                    data: {
                        page: pageNum,
                        limit: pageSize
                    },
                    needLogin:true
                })
                if (res.code == 1) {
                    this.personList = res.data.data;
                    // 接口返回的当前页数据列表 (数组)
                    let curPageData = res.data.data;
                    // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                    let curPageLen = curPageData.length;
                    // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                    // let totalPage = data.xxx;
                    // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
                    let totalSize = res.data.total;

                    this.mescroll.endBySize(curPageLen, totalSize);
                    if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
                    this.list = this.list.concat(curPageData); //追加新数据
                    /* for (let i = 0, leng = this.personList.length; i < leng; i++) {
                        this.personList[i].pay_time = this.$myUtils.formatDate(this.personList[i].pay_time * 1000, 'Y年M月D日 h:m:s')
                    } */
                } else {
                    this.mescroll.endErr()
                }
            },
            //进入课程
            gotoCourse(item){
                uni.navigateTo({
                    url: '/pages/index/detail?id=' + item.id
                })
            }
        }
    };
</script>
<style>
    page {
        background: #f6f7f9;
    }
    /*课程列表*/
    .index-kecheng {
        background: #fff;
    }
    .index-content-qy {
        padding-top: 12px;
        width: 92%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    .index-content-qy .video-content {
        margin-bottom: 13px;
        display: flex;
        align-items:self-start;
        padding-top: 0;
        border-bottom: solid 1px #f5f5f5;
        padding-bottom: 13px;
    }
    .index-content-qy .video-content:last-child {
        border-bottom: none!important;
        padding-bottom: 0;
    }
    .video-content-img {
        width: 103px;
        height: 74px;
        border-radius: 5px;
    }
    .video-content-flex {
        display: flex;
        flex-direction: column;
        align-items: start;
        text-align: left;
        flex: 1;
        padding-left: 8px;
        height: 78px;
        justify-content: space-between;
    }
    .video-content-h1 {
        color: #000;
        font-size: 16px;
        line-height: 20px;
        padding-bottom: 4px;
    }
    .video-content-learn {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }
    .video-content-learn-button {
        background: rgb(77, 114, 255);
        padding: 7px 10px;
        font-size: 12px;
        color: #fff;
        border-radius: 3px;
    }
    /*收藏*/
    .video-jieshao {
        display: flex;
        flex-direction: column;
        background: #fff;
        margin-bottom: 54px;
    }
    .video-content-detail{
        flex: 1;
        margin-right: 8px;
    }
</style>
